<style>
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.width100{
		width:100%;
	}
	.detallePopup{
		font-family:Arial, Helvetica, sans-serif;
		line-height:1.2em;
		font-size:1em;
	}
	.imgAvatar{
		margin-top:2.5%;
		width:25%;
		float:left;
		margin-left:3%;
		border-radius: 5px;
	}
	.userName{
		line-height:1.4em;
		margin-top:2%;
		font-size:1.7em;
		color: black; text-shadow: #c1c1c1 0.1em 0.1em 0.4em;
	}
	.fieldTitle{
		color:#000;
		
	}
	.sombras{
		color: black; text-shadow: #c1c1c1 0.1em 0.1em 0.4em;
		font-weight:lighter;
	}
	.border{
		border:1px solid #B2CBDB;
		-moz-border-radius: 15px;
		border-radius: 15px;
		background-color:#FAFAFA;
		margin-bottom:2%;
		-moz-box-shadow: 3px 3px 15px #c1c1c1;
		-webkit-box-shadow: 3px 3px 15px #c1c1c1;
		box-shadow: 3px 3px 15px #c1c1c1;
		padding-bottom:3%;
	}
	.ul_historial{
		border:1px solid #c1c2c3;
		height:420px;
		padding:2%;
		overflow-y:auto;
		overflow-x:hidden;
	}
	.ul_historial li{
		padding-top:1%;
		padding-bottom:1%;
		margin-left:1%;
		float:left;
		width:95%;
	}
	.ul_historial li ul li{
		margin-left:5%;
	}
</style>
<div class="left width100 detallePopup">
	<ul class="ul_historial left" style="width:50%;">
		<li class="border">
			<?php 
			if(empty($user["User"]["avatar"])):
				echo $html->image('img_pvirtuales/juanelo.png', array('class'=>'imgAvatar'));
			else:?>
				<img class="imgAvatar" src="<?php echo $user['User']['avatar'];?>"/>
	<?php	endif;?>
			<ul style="width:65%;float:left;">
				<li>
					<label class="userName">
						<?php 
							echo strtoupper($user["User"]["nombre1"]." ".$user["User"]["nombre2"]." ".$user["User"]["apellido1"]." ".$user["User"]["apellido2"]);
						?>
					</label>
				</li>
				<li><label class="fieldTitle">Rut:</label><label class="fieldContent"><?php echo $user["User"]["rut"];?></label></li>
				<li><label class="fieldTitle">Sexo: </label><label class="fieldContent"><?php if($user["User"]["sexo"]=="F"): echo "Femenino"; else: echo "Masculino";endif;?></label></li>
				<li><label class="fieldTitle">Fecha Nacimiento:</label><label class="fieldContent"><?php echo $user["User"]["fechanacimiento"];?></label></li>
				<li><label class="fieldTitle">Edad:</label><label class="fieldContent"><?php echo date("Y")-substr($user["User"]["fechanacimiento"],0,4);?></label></li>
				<li><label class="fieldTitle">Oficio: </label><label class="fieldContent"><?php echo $oficio["Oficio"]["nombre"];?></label></li>
			</ul>
		</li>
		<li class="border">
			<ul>
				<li class="sombras">DATOS DE CONTACTO</li>
				<li><label class="fieldTitle">Email: </label><label class="fieldContent"><?php echo $user["User"]["email"];?></label></li>
				<li><label class="fieldTitle">Telefono móvil: </label><label class="fieldContent"><?php echo $user["User"]["fono_movil"];?></label></li>
				<li><label class="fieldTitle">Telefono fijo: </label><label class="fieldContent"><?php echo $user["User"]["fono_fijo"];?></label></li>
				<li>
					<label class="fieldTitle">Dirección: </label>
					<label class="fieldContent"><?php echo $user["User"]["direccion"].", Sector ".$sector["Sector"]["nombre"].", ".$comunaSector["Comuna"]["nombre"];?></label>
				</li>
			</ul>
		</li>
		<li class="border">
			<ul>
				<li class="sombras">PROCESOS</li>
				<?php foreach($procesos as $proceso):?>
				<li>
					<label class="fieldTitle">
					<?php echo strtoupper($proceso["tipoGrupoNombre"]);?><?php echo ": ".$proceso["procesoListo"];?>
					</label>
				</li>
				<?php endforeach;?>
			</ul>
		</li>
	</ul>
	<ul class="ul_historial right" style="width:40%;">
		<?php if(!empty($data["actual"])):?>
		<li class="border">
			<ul>
				<li class="sombras">PARTICIPA COMO</li>
			<?php	foreach($data["actual"] as $historial):?>
				<li>
					<a class="ajaxlink masInfoGrupo" grupoid="<?php echo $historial['grupo']['id'];?>">
						<?php echo "<strong>".$historial["nombreRol"]."</strong> de <strong>".$historial["nombreGrupo"]."</strong> ".$historial["grupo"]["nombre"];?>
						<?php //echo $html->image('img_pvirtuales/more_info.gif', array('Title' => 'Detalle'))?>
					</a>
					<ul show="true" id="<?php echo $historial['grupo']['id'];?>" style="display:none;">
						<li>Día reunión <?php echo $historial["grupo"]["dia_reunion"];?></li>
						<li>Hora <?php echo $historial["grupo"]["hora_reunion"];?></li>
						<?php if($historial["duracion"] == "D"):?>
							<li>Inicio:<?php echo $historial["grupo"]["fecha_inicio"];?></li>
							<li>Término:<?php echo $historial["grupo"]["fecha_termino"];?></li>
						<?php endif;?>
						<li>Dirección <?php echo $historial["grupo"]["direccion"].", Sector ".$historial["sectorGrupo"].", ".$historial["comunaSectorGrupo"];?></li>
						<li>Iglesia <?php echo $historial["iglesiaGrupo"].", Sector ".$historial["comunaIglesiaGrupo"];?></li>
						<li>
							<strong>Administrar</strong>
							<a class="ajaxlink editarMiembros" grupoid="<?php echo $historial['grupo']['id'];?>">
								<?php echo $html->image('img_pvirtuales/users-icon.png', array('style'=>'width:16px;','Title' => 'Administrar miembros'))?>
							</a>
							<a class="ajaxlink editarGrupo" grupoid="<?php echo $historial['grupo']['id'];?>">
								<?php echo $html->image('img_pvirtuales/edit-icon.png', array('Title' => 'Editar Grupo'))?>
							</a>
						</li>
					</ul>
				</li>
		<?php	endforeach;?>
			</ul>
		</li>
	<?php	endif;?>	
	<?php if(!empty($data["futuro"])):?>
		<li class="border">
			<ul>
			<li class="sombras">PARTICIPARÁ COMO</li>
	<?php	foreach($data["futuro"] as $historial):?>
			<li>
				<a class="ajaxlink masInfoGrupo" grupoid="<?php echo $historial['grupo']['id'];?>">
					<?php echo "<strong>".$historial["nombreRol"]."</strong> de <strong>".$historial["nombreGrupo"]."</strong> ".$historial["grupo"]["nombre"];?>
					<?php //echo $html->image('img_pvirtuales/more_info.gif', array('Title' => 'Detalle'))?>
				</a>
				<ul show="true" id="<?php echo $historial['grupo']['id'];?>" style="display:none;">
					<li>Día reunión <?php echo $historial["grupo"]["dia_reunion"];?></li>
					<li>Hora <?php echo $historial["grupo"]["hora_reunion"];?></li>
					<?php if($historial["duracion"] == "D"):?>
						<li>Inicio:<?php echo $historial["grupo"]["fecha_inicio"];?></li>
						<li>Término:<?php echo $historial["grupo"]["fecha_termino"];?></li>
					<?php endif;?>
					<li>Dirección <?php echo $historial["grupo"]["direccion"].", Sector ".$historial["sectorGrupo"].", ".$historial["comunaSectorGrupo"];?></li>
					<li>Iglesia <?php echo $historial["iglesiaGrupo"].", Sector ".$historial["comunaIglesiaGrupo"];?></li>
					<li>
						<strong>Administrar</strong>
						<a class="ajaxlink editarMiembros" grupoid="<?php echo $historial['grupo']['id'];?>">
							<?php echo $html->image('img_pvirtuales/users-icon.png', array('style'=>'width:16px;','Title' => 'Administrar miembros'))?>
						</a>
						<a class="ajaxlink editarGrupo" grupoid="<?php echo $historial['grupo']['id'];?>">
							<?php echo $html->image('img_pvirtuales/edit-icon.png', array('Title' => 'Editar Grupo'))?>
						</a>
					</li>
				</ul>
			</li>
	<?php	endforeach;?>
			</ul>
		</li>	
	<?php	endif;?>	
	<?php if(!empty($data["pasado"])):?>
		<li class="border">
			<ul>
			<li class="sombras">HA PARTICIPADO COMO</li>
	<?php	foreach($data["pasado"] as $historial):?>
			<li>
				<a class="ajaxlink masInfoGrupo" grupoid="<?php echo $historial['grupo']['id'];?>">
					<?php echo "<strong>".$historial["nombreRol"]."</strong> de <strong>".$historial["nombreGrupo"]."</strong> ".$historial["grupo"]["nombre"];?>
					<?php //echo $html->image('img_pvirtuales/more_info.gif', array('Title' => 'Detalle'))?>
				</a>
				<ul show="true" id="<?php echo $historial['grupo']['id'];?>" style="display:none;">
					<li>Día reunión <?php echo $historial["grupo"]["dia_reunion"];?></li>
					<li>Hora <?php echo $historial["grupo"]["hora_reunion"];?></li>
					<?php if($historial["duracion"] == "D"):?>
						<li>Inicio:<?php echo $historial["grupo"]["fecha_inicio"];?></li>
						<li>Término:<?php echo $historial["grupo"]["fecha_termino"];?></li>
					<?php endif;?>
					<li>Dirección <?php echo $historial["grupo"]["direccion"].", Sector ".$historial["sectorGrupo"].", ".$historial["comunaSectorGrupo"];?></li>
					<li>Iglesia <?php echo $historial["iglesiaGrupo"].", Sector ".$historial["comunaIglesiaGrupo"];?></li>
					<li>
						<strong>Administrar</strong>
						<a class="ajaxlink editarMiembros" grupoid="<?php echo $historial['grupo']['id'];?>">
							<?php echo $html->image('img_pvirtuales/users-icon.png', array('style'=>'width:16px;','Title' => 'Administrar miembros'))?>
						</a>
						<a class="ajaxlink editarGrupo" grupoid="<?php echo $historial['grupo']['id'];?>">
							<?php echo $html->image('img_pvirtuales/edit-icon.png', array('Title' => 'Editar Grupo'))?>
						</a>
					</li>
				</ul>
			</li>
	<?php	endforeach;?>
			</ul>
		</li>
	<?php	 endif;?>
	<?php if(!empty($arbolGen)):?>
		<li class="border">
			<ul>
				<li class="sombras">GENEALOGÍA</li>
				<li>
					<a class="ajaxlink verArbol" show="true">
						Ver detalle
					</a>
				</li>
				<li id="liDetalleArbol" style="display:none;">
					<ul>
						<li><?php echo $user["User"]["nombre1"]." ".$user["User"]["apellido1"];?></li>
						<?php foreach($arbolGen as $user):?>
							<li><?php echo $html->image('img_pvirtuales/arrow-down.png', array('style'=>'margin:auto;'));?></li>
							<li><?php echo $user["User"]["nombre1"]." ".$user["User"]["apellido1"];?></li>
						<?php endforeach;?>
					</ul>
				</li>			
			</ul>
		</li>
	<?php endif;?>	
	</ul>
</div>